<template>
	<div>
		<home-header :rst="rst" />
		<home-info :rst="rst" />
		<home-search :newProducts="newProducts" :searchView="searchView" />
		<home-swiper :swiperInfo="swiperInfo" />
		<home-filter :newProducts="newProducts" :filterData="filterData" />
		<home-products :newProducts="newProducts" />
		<home-bottom :newProducts="newProducts" :accounts="accounts" :rst="rst" />
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import { mapGetters } from "vuex";
	import HomeHeader from "../components/home/Header";
	import HomeInfo from "../components/home/Info";
	import HomeSearch from "../components/home/Search";
	import HomeFilter from "../components/home/Filter";
	import HomeSwiper from "../components/home/Swiper";
	import HomeProducts from "../components/home/Products";
	import HomeBottom from "../components/home/BottomNav";

	export default {
		name: "home",
		data() {
			return {
				rstDate: Object,
				searchView: null,
				filterView: null,
				layerView: null,
				layerClose: null,
				swiperInfo: []
			};
		},
		computed: {
			...mapState(["rst", "accounts", "products", "filterData"]),
			...mapGetters(["newProducts"])
		},
		mounted() {
			this.rstDate = this.rst;
			this.getSwiperInfo();
		},
		methods: {
			getSwiperInfo() {
				this.$axios.get(`/shop/data/swiper.json`).then(res => {
					this.swiperInfo = res.data;
				});
			}
		},
		watch: {
			newProducts: function() {
				this.$store.commit("dataCounts");
			}
		},
		components: {
			HomeHeader,
			HomeSearch,
			HomeInfo,
			HomeFilter,
			HomeSwiper,
			HomeProducts,
			HomeBottom
		}
	};
</script>


<style scoped>
</style>